<template>
    <div class="power">
        <el-row :gutter="20">
            <el-col :span="4">
                <el-row class="l-powerLine" v-for="(item, index) in roleList" :key="index">
                    <el-button class="l-btn-power" :type="item.id == currentRoleId ? 'primary' : 'info'" v-on:click="onRole(item)">
                        {{ item.roleName }}
                    </el-button>
                </el-row>
            </el-col>
            <el-col :span="20" class="l-body">
                <el-checkbox v-model="selectAll" v-on:change="onChange()">全选</el-checkbox>
                <template v-if="$Power.PowerAction(userPower, 'Account.Power')">
                    <el-button class="l-save" type="danger" v-on:click="onSave()">保存</el-button>
                </template>

                <el-divider></el-divider>

                <div v-for="(item, index1) in menuListV1" :key="index1">
                    <el-row class="l-menurow" :i="index1">
                        <label class="l-menu-title">{{ item.menuName }}</label>
                        <el-checkbox v-model="item.checked" v-on:change="onChangeV1(item.id)">全选</el-checkbox>
                    </el-row>
                    <div v-for="(itemNode, index2) in menuListV2" :key="index2">
                        <div v-if="itemNode.parentId == item.id">
                            <el-row class="l-menurow l-m-80" :gutter="20">
                                <label class="l-menu-title2">{{ itemNode.menuName }}</label>
                                <el-checkbox v-model="itemNode.checked" v-on:change="onChangeV2(itemNode.id)">全选 </el-checkbox>
                                <el-divider direction="vertical"></el-divider>
                                <el-checkbox v-model="itemNode.checkedSelect" v-on:change="onChangeV3(itemNode.id)">查询 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedAdd" v-on:change="onChangeV3(itemNode.id)">新增 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedDelete" v-on:change="onChangeV3(itemNode.id)">删除 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedUpdate" v-on:change="onChangeV3(itemNode.id)">修改 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedExport" v-on:change="onChangeV3(itemNode.id)">导出 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedEnable" v-on:change="onChangeV3(itemNode.id)">启用禁用 </el-checkbox>
                                <el-checkbox v-model="itemNode.checkedAction" v-on:change="onChangeV3(itemNode.id)"> 管理员操作</el-checkbox>
                            </el-row>
                        </div>
                    </div>

                    <el-divider></el-divider>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { GetRoleListAll, GetMenuPowerList, GetRolePower, SaveRolePower } from "@/service/systemapi";
export default {
    data() {
        return {
            userPower: "",
            currentPagePower: "",
            currentRoleId: "",
            roleList: [],
            menuList: [],
            menuListV1: [],
            menuListV2: [],
            powerList: [],
            selectAll: false //全选
        };
    },
    created() {
        this.currentPagePower = this.$route.query.powercode;
        console.log(this.currentPagePower);
        this.userPower = localStorage.getItem("userPower");
        this.InitData();
    },
    watch: {},
    methods: {
        //初始化
        InitData() {
            if (this.$Power.PowerSelect(this.userPower, this.currentPagePower)) {
                this.getRoleList();
                this.getMenus();
            }
        },
        //查询列表
        getRoleList() {
            this.openLoading();
            this.roleList = [];
            var that = this;

            GetRoleListAll()
                .then(res => {
                    that.roleList = res.data;

                    if (that.roleList != undefined && that.roleList.length > 0) {
                        that.currentRoleId = that.roleList[0].id;
                        that.getRolePowerList();
                    }
                    that.closeLoading();
                })
                .catch(err => {
                    this.$message.error("数据请求异常");
                    that.closeLoading();
                });
        },
        //获取菜单列表
        getMenus() {
            this.menuList = [];
            this.menuListV1 = [];
            this.menuListV2 = [];
            var that = this;
            GetMenuPowerList()
                .then(res => {
                    if (res.success) {
                        that.menuList = res.data;
                        that.menuListV1 = res.data.filter(item => {
                            return item.level == 1;
                        });
                        that.menuListV2 = res.data.filter(item => {
                            return item.level == 2;
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    this.$message.error("系统异常");
                    console.log(err);
                });
        },
        onSelectV1(e) {},
        //权限
        getRolePowerList() {
            this.powerList = [];
            var that = this;

            GetRolePower(this.currentRoleId)
                .then(res => {
                    that.powerList = res.data;

                    //设置权限
                    that.SetPower();
                })
                .catch(err => {
                    this.$message.error("数据请求异常");
                });
        },
        //初始化表单
        initForm() {
            this.form.id = "";
            this.form.roleName = "";
            this.form.remark = "";
            this.form.sort = 1;
        },
        //选择权限
        onRole(row) {
            this.currentRoleId = row.id;
            this.selectAll = false;
            this.onChange();
            this.getRolePowerList();
        },
        //全选
        onChange() {
            let currentCheckAll = this.selectAll;
            this.menuListV1.forEach(item => {
                item.checked = currentCheckAll;
            });
            this.menuListV2.forEach(item => {
                item.checked = currentCheckAll;
                item.checkedSelect = currentCheckAll;
                item.checkedAdd = currentCheckAll;
                item.checkedDelete = currentCheckAll;
                item.checkedUpdate = currentCheckAll;
                item.checkedExport = currentCheckAll;
                item.checkedEnable = currentCheckAll;
                item.checkedAction = currentCheckAll;
            });
        },
        //一级菜单
        onChangeV1(id) {
            console.log(id);

            var that = this;

            //获取到当前菜单
            let currentMenuV1 = that.menuListV1.filter(item => {
                return item.id == id;
            })[0];

            //循环二级菜单
            that.menuListV2.forEach(item => {
                if (item.parentId == id) {
                    item.checked = currentMenuV1.checked;
                    item.checkedSelect = currentMenuV1.checked;
                    item.checkedAdd = currentMenuV1.checked;
                    item.checkedDelete = currentMenuV1.checked;
                    item.checkedUpdate = currentMenuV1.checked;
                    item.checkedExport = currentMenuV1.checked;
                    item.checkedEnable = currentMenuV1.checked;
                    item.checkedAction = currentMenuV1.checked;
                }
            });

            //循环一级菜单
            let j = 0;
            that.menuListV1.forEach(item => {
                if (item.checked == currentMenuV1.checked) {
                    j++;
                }
            });
            if (j == that.menuListV1.length) {
                that.selectAll = currentMenuV1.checked;
            } else {
                that.selectAll = false;
            }
        },
        //二级菜单
        onChangeV2(id) {
            console.log("耳机", id);
            debugger;
            //查找当前二级菜单
            var that = this;

            that.menuListV2.forEach(item => {
                if (item.id == id) {
                    item.checkedSelect = item.checked;
                    item.checkedAdd = item.checked;
                    item.checkedDelete = item.checked;
                    item.checkedUpdate = item.checked;
                    item.checkedExport = item.checked;
                    item.checkedEnable = item.checked;
                    item.checkedAction = item.checked;

                    if (item.checked == false) {
                        that.selectAll = false;

                        //上级去掉
                        that.menuListV1.forEach(ell => {
                            if (ell.id == item.parentId) {
                                ell.checked = false;
                            }
                        });
                    } else {
                        that.funMenuSelectAction2(id);
                    }
                }
            });
        },
        funMenuSelectAction2(id) {
            var that = this;
            //查询当前二级菜单 一级菜单
            let currentV1Id = this.menuListV2.filter(a => {
                return a.id == id;
            })[0].parentId;

            let count1 = this.menuListV2.filter(a => {
                return a.parentId == currentV1Id;
            }).length;
            let count2 = this.menuListV2.filter(a => {
                return a.parentId == currentV1Id && a.checked == true;
            }).length;
            if (count1 == count2) {
                that.menuListV1.forEach(item => {
                    if (item.id == currentV1Id) {
                        item.checked = true;
                        that.funMenuSelectAction();
                    }
                });
            }
        },
        //查询 一级 是否全部选中
        funMenuSelectAction() {
            let tempCount = this.menuListV1.length;

            let tempCount2 = this.menuListV1.filter(item => {
                return item.checked;
            }).length;

            this.selectAll = tempCount == tempCount2;
        },
        //保存权限
        onSave() {
            var dataJson = [];

            //循环一级菜单
            var that = this;

            that.menuListV1.forEach(item => {
                if (item.checked) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: ""
                    });
                }
            });

            that.menuListV2.forEach(item => {
                if (item.checkedExport) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Export"
                    });
                }
                if (item.checkedSelect) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Select"
                    });
                }
                if (item.checkedAdd) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Add"
                    });
                }
                if (item.checkedUpdate) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Update"
                    });
                }
                if (item.checkedDelete) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Delete"
                    });
                }
                if (item.checkedEnable) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Enable"
                    });
                }
                if (item.checkedAction) {
                    dataJson.push({
                        MenuId: item.id,
                        RooleId: that.currentRoleId,
                        MenuActionId: "Action"
                    });
                }
            });

            that.openLoading();

            SaveRolePower(dataJson)
                .then(res => {
                    console.log(res);
                    that.closeLoading();
                    if (res.success) {
                        that.$message({ message: res.data, type: "success" });
                        that.getRolePowerList();
                        that.dialogVisible = false;
                    } else {
                        that.$message.error(res.msg);
                    }
                })
                .catch(err => {
                    that.$message.error("操作失败");
                    that.closeLoading();
                });
        },
        //二级菜单 功能
        onChangeV3(id) {
            var that = this;
            that.menuListV2.forEach(item => {
                if (item.id == id) {
                    let i = 0;
                    if (item.checkedSelect) {
                        i++;
                    }
                    if (item.checkedAdd) {
                        i++;
                    }
                    if (item.checkedDelete) {
                        i++;
                    }
                    if (item.checkedUpdate) {
                        i++;
                    }
                    if (item.checkedExport) {
                        i++;
                    }
                    if (item.checkedExport) {
                        i++;
                    }
                    if (item.checkedAction) {
                        i++;
                    }

                    if (i == 7) {
                        item.checked = true;
                        that.funMenuSelectAction2(id);
                    } else {
                        //去除上级所有全选按钮
                        item.checked = false;
                        that.selectAll = false;

                        //上级去掉
                        that.menuListV1.forEach(ell => {
                            if (ell.id == item.parentId) {
                                ell.checked = false;
                            }
                        });
                    }
                }
            });
        },
        //赋值权限
        SetPower() {
            var that = this;
            if (that.powerList != undefined && that.powerList.length > 0) {
                let q = 0;
                //循环一级菜单
                for (let i = 0; i < that.menuListV1.length; i++) {
                    //获取当前一级菜单下二级菜单得到数量
                    let tempMenuV2Count = that.menuListV2.filter(item => {
                        return item.parentId == that.menuListV1[i].id;
                    }).length;

                    let p = 0;
                    //循环二级菜单
                    for (let j = 0; j < that.menuListV2.length; j++) {
                        //当前二级菜单 是属于当前一级菜单
                        if (that.menuListV2[j].parentId == that.menuListV1[i].id) {
                            let m = 0;
                            //循环权限 去赋值
                            for (let k = 0; k < that.powerList.length; k++) {
                                let currentPower = that.powerList[k];

                                if (currentPower.menuId == that.menuListV2[j].id) {
                                    if (currentPower.menuActionId == "Select") {
                                        that.menuListV2[j].checkedSelect = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Add") {
                                        that.menuListV2[j].checkedAdd = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Delete") {
                                        that.menuListV2[j].checkedDelete = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Update") {
                                        that.menuListV2[j].checkedUpdate = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Export") {
                                        that.menuListV2[j].checkedExport = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Enable") {
                                        that.menuListV2[j].checkedEnable = true;
                                        m++;
                                    }
                                    if (currentPower.menuActionId == "Action") {
                                        that.menuListV2[j].checkedAction = true;
                                        m++;
                                    }
                                }
                            }

                            if (m == 7) {
                                that.menuListV2[j].checked = true;
                                p++;
                            }
                        }
                    }

                    if (p == tempMenuV2Count) {
                        that.menuListV1[i].checked = true;

                        q++;
                    }
                }

                if (q == that.menuListV1.length) {
                    that.selectAll = true;
                }
            }
        }
    }
};
</script>

<style scoped>
body {
    width: 100%;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}

.l-m-80 {
    padding-left: 80px;
}

.power {
    /* color: white; */
    background-color: #edf0f3;
    width: 100%;
    height: calc(100vh - 120px);
    overflow: auto;
}

.l-powerLine {
    padding: 10px 20px;
}

.l-btn-power {
    width: 100%;
}

.l-body {
    padding: 20px 0px;
}

.l-menurow {
    margin-bottom: 30px;
}

.l-menu-title {
    font-weight: bold;
    color: green;
    margin-right: 20px;
}

.l-menu-title2 {
    font-weight: bold;
    color: #a95c4b;
    margin-right: 20px;
}

.l-save {
    position: fixed;
    right: 50px;
    top: 100px;
    width: 200px;
}
</style>
